<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.9.0/axios.min.js"></script>
</head>
<body>
    <h2>axios的基本使用</h2>
    <button class="btn1">GET</button>
    <button class="btn2">POST</button>
    <button class="btn3">PUT</button>
    <button class="btn4">DELETE</button>
    <script>
        let btn1 = document.querySelector('.btn1');
        let btn2 = document.querySelector('.btn2');
        let btn3 = document.querySelector('.btn3');
        let btn4 = document.querySelector('.btn4');

        //发送get请求
        btn1.addEventListener('click',function(){
            //发送AJAX请求 
            axios({
                //发送类型
                method : 'GET',
                //URL
                url : 'http://localhost:3000/users' //指向序列为1的用户
                
            }).then(response =>{
                console.log(response);
            })
        })//成功

        //发送post请求，添加新的文章
        btn2.addEventListener('click',function(){
            axios({
                //请求类型
                method : 'POST',
                url : 'http://localhost:3000/users',
                //添加信息
                data : {
                    username : 'qwe',
                    role : 'student'

                }
            }).then(response =>{
                console.log(response);
            })
        })
        //发送put请求,更新数据
        btn3.addEventListener('click',function(){
            axios({
                method : 'PUT',
                url : 'http://localhost:3000/users/7b61',
                data: {
                    username : 'asd',
                    role : 'teacher'
                }
            }).then(response =>{
                console.log(response);
            })
        })
        //删除数据
        btn4.addEventListener('click',function(){
            //发送AJAX请求,不需要设置请求体
            axios({
                method : 'delete',
                url : 'http://localhost:3000/users/7b61'
            }).then(response => {
                console.log(response) ;
            })
        })
    </script>
</body>
</html>